<template>
<div>
  <el-swiper :list="swiper" />

  <van-tabs v-model="active">
    <van-tab  v-for="(item,index) of service"
              :class="{'active':active===index}"
              @click="active = index"
              :title="item.dictName"
              :key="item.dictId" />
  </van-tabs>
  <div v-for="item of list"
       :key="item.id">
    <h5 style="padding: 10px 10px 2px 10px">{{item.dictLabel}}</h5>
    <van-card
        :title="item.title"
        @click="$router.push(`/sdetail?dictCode=${item.dictCode}`)"
        :thumb="item.picUrl || ''"
    >
      <template #tags>
        <div style="height: 48px;overflow: hidden;margin: 10px 0;color: gray">
          <div v-for="i of item.content" >{{i}}</div>
        </div>
      </template>
      <template #footer>
        <van-button
            type="primary"
            size="mini">
          阅读更多
        </van-button>
      </template>
    </van-card>


  </div>
<div style="text-align: center">
  <van-button  v-if="list.length < total"
               @click="pgn"
               type="primary">
    点击加载
  </van-button>
</div>
  <van-empty v-if="!list.length" description="暂无更多～" />
</div>
</template>

<script>
import {getService, getServiceList} from "@/api";
import {getSwiper} from "@/api/swiper";

export default {
  name: "subject",
  data() {
    return {
      active:0,
      service:[],
      list:[],
      total:0,
      current:1,
      swiper:[]
    }
  },
  created() {
    this.get()
  },
  watch:{
    active(){
      this.current = 1
      this.list = []
      this.getList()
    }
  },
  methods: {
    get(){
      getSwiper(2).then(({records})=>{
        this.swiper = records
      })
      getService().then(res=>{
        this.service = res
        this.getList()
      })
    },
    getList(){
      getServiceList({
        current:this.current,
        params:this.service[this.active].dictType,
        size:10
      }).then(res=>{
        console.log(res)
        this.list = this.list.concat(res.records)
        this.current = res.current
        this.total = res.total
      })
    },
    pgn(){
      this.current++
      this.getList()
    }
  }
}
</script>

<style scoped>

>>>.van-tabs__line{
  background-color: #99CC00 !important;
}

</style>
